<template>
    <div>
        <van-nav-bar title="品牌建材"  left-arrow @click-left="onClickLeft">
            <template #right>
                <van-image
                id="right-text"
                width="20"
                height="20"
                src="/img/ss_3.png"
                />
            </template>
         </van-nav-bar>
         <div id="condition" v-if="xuan">
            <span v-for="item in xuan" :key="item">{{item}}</span>
        </div>
        <div id="pinpai" v-for="(n,i) in pp" :key="i" v-model='pp'>
            <div>
            <van-image
            round
            width="3rem"
            height="3rem"
            :src="`/company/${pp[i][5]}`"
            />  
            </div>
            <div id="text">
                <h4>{{pp[i][0]}}</h4>
                <router-link to="/interact">
                <button>咨询</button>
                </router-link>
                <p>{{pp[i][1]}}</p>
                <div>
                    <van-image
                    width="100"
                    height="100"
                    radius="10px"
                    :src="`/company/${pp[i][2]}`"
                    />
                    <van-image
                    width="100"
                    height="100"
                    radius="10px"
                    :src="`/company/${pp[i][3]}`"
                    />
                    <van-image
                    width="100"
                    height="100"
                    radius="10px"
                    :src="`/company/${pp[i][4]}`"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                xuan: ['装修建材','全屋定制','成品家私','厨卫电器','家用电器'],
                pp:[['haier','海尔是全球大型家电品牌，提供冰箱、洗衣机、空调等','haier1.jpg','haier2.jpg','haier3.jpg','haier.jpg'],
                ['丹拿','丹拿是全球大型家电品牌，提供冰箱、洗衣机、空调等','danna1.jpg','danna2.jpg','danna3.jpg','danna.jpg'],
                ['国玉','莱克是全球大型家电品牌，提供冰箱、洗衣机、空调等','guoyu1.jpg','guoyu2.jpg','guoyu3.jpg','guoyu.jpg'],
                ['莱克','莱克是全球大型家电品牌，提供冰箱、洗衣机、空调等','laike1.jpg','laike2.jpg','laike3.jpg','laike.jpg']
                ]
            }
        },
        methods:{
            onClickLeft() {
            this.$router.back();
            },
        }
    }
</script>

<style lang="scss" scoped>
#condition{
    display: flex;
    white-space:nowrap;
    overflow:hidden;
    padding: 0 5px;
    span{
        font-size: 0.8em;
        border-radius: 5px;
        background: #efefef;
        margin: 5px;
        padding: 5px ;
        &.active{
            background: #b1aeda;
            color: rgb(35, 35, 207);
        }
    }
}
#pinpai{
    display: flex;
    padding: 10px 5px;
    border-radius: 10px;
    background: #F4F4F4;
    margin: 5px;
    #text{
        margin-left: 10px;
        h4{
        line-height: 15px;
        margin: 0;
        text-align: left;        }
        p{
            color: rgb(169, 167, 167);
            line-height: 12px;
            font-size: 0.8em;
        }
        button{
            color: #4960F7;
            border: 1px solid #4960F7;
            border-radius: 5px;
            padding: 5px 10px;
            margin: -10px 0px -10px 200px;
        }
        div{
            display: flex
        }
    }  
}
</style>